<#assign ctx=request.contextPath />
<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
     <title>Hello</title>
     <link rel="stylesheet" href="css.css">
     <link rel="stylesheet" href="cate.css">
     <link rel="stylesheet" href="iscroll.css">
    <script type="text/javascript" src="${ctx}/iscroll.js"></script>
    <script type="text/javascript">
        var myScroll;

        function loaded() {
            myScroll = new iScroll('wrapper', {
                snap: true,
                momentum: false,
                hScrollbar: false,
                onScrollEnd: function () {
                    document.querySelector('#indicator > li.active').className = '';
                    document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
                }
            });
        }

        document.addEventListener('DOMContentLoaded', loaded, false);
    </script>
</head>
<body>
<div class="top">
   <a href="${ctx}/logout" class="return"><img src="11.png"></a>
   <div class="box">
       Hello, ${(user.username)!""}!
   </div>
</div>
<div class="empty"></div>

      <div class="banner">
      	<div id="wrapper">
      		<div id="scroller">
      			<ul id="thelist">
      			    <li><a href="javascript:void(0)"><img src="4.4.jpg" /></a></li>
      				<li><a href="javascript:void(0)"><img src="3.3.jpg" /></a></li>
      				<li><a href="javascript:void(0)"><img src="2.2.jpg" /></a></li>
      				<li><a href="javascript:void(0)"><img src="1.1.jpg" /></a></li>
      			</ul>
      		</div>
      	</div>
      	<div id="nav">
      		<ul id="indicator">
      			<li class="active"></li>
      			<li></li>
      			<li></li>
      			<li></li>
      		</ul>
      	</div>
      </div>
     <script type="text/javascript">
      var count = document.getElementById("thelist").getElementsByTagName("img").length;
      var count2 = document.getElementsByClassName("menuimg").length;
      for(i=0;i<count;i++){
       document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:"+document.body.clientWidth+"px";
      }
      document.getElementById("scroller").style.cssText = " width:"+document.body.clientWidth*count+"px";
      setInterval(function(){
      	myScroll.scrollToPage('next', 0,400,count);
      },3500 );
      window.onresize = function(){
      	for(i=0;i<count;i++){
      		document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:"+document.body.clientWidth+"px";
      	}
       document.getElementById("scroller").style.cssText = " width:"+document.body.clientWidth*count+"px";
      }
      </script>


      <ul class="mainmenu">
      	<li><a href="${ctx}/lossMng/procList"><img src="1.png" /><p>我的模板</p></a></li>
      	<li><a href="${ctx}/lossMng/pinstList"><img src="4.png" /><p>我的流程</p></a></li>
      	<li><a href="${ctx}/lossMng/dmaList"><img src="5.png" /><p>我的DMA</p></a></li>
      	<li><a href="${ctx}/lossMng/ticketList"><img src="20.png" /><p>工单统计</p></a></li>
      	<li style="position: relative;"><a href="${ctx}/lossMng/taskList"><img src="13.png" /><b>${(taskList?size)!"0"}</b><p>我的任务</p></a></li>
      	<li><a href="${ctx}/Meter/list"><img src="14.png" /><p>大表档案</p></a></li>
      	<li><a href="#"><img src="20.png" /><p>(敬请期待)</p></a></li>
      	<li><a href="#"><img src="18.png" /><p>(敬请期待)</p></a></li>
      </ul>
      <div class="content">
        <div>流程图：</div>
        <img src="loss-mng.jpg">
      </div>


</body>
</html>